import React, {Component} from 'react'
import {Col, Row} from 'antd'
import '../../less/top.less'
import offlineCities from "../../images/offline-cities.png";

class OfflineCities extends Component {

  render () {
    return <div style={{
      backgroundSize: 'cover',
      backgroundImage: 'url(https://s3.cn-north-1.amazonaws.com.cn/tws-courses-resource/pair-programing-images/%E7%BA%BF%E4%B8%8B%E4%BD%93%E9%AA%8C%E5%9F%8E%E5%B8%82+-+%E5%BA%95%E5%9B%BE.png)',
      backgroundRepeat: 'no-repeat',
      fontSize: '16px',
      color: 'white'
    }}>
      <Row type='flex' justify='center'>
        <h3 className='title'
            style={{color: 'white', marginTop: '40px'}}>线下体验城市
          <span className='title_underline'/></h3>
      </Row>
      <Row type="flex" justify="center" >
        <div className='PC_box'>
        <Col span={24} style={{margin: '.20rem 0 .80rem 0'}}>
          <Row type="flex" justify="space-between" align="bottom" style={{textAlign: 'center'}}>
            <Col xs={{span: 4}} lg={{span: 4}} >
                <img src={offlineCities} alt='' style={{width: '.60rem'}}/>
                <div style={{margin: '.10rem 0'}}><b>北京</b></div>
            </Col>
            <Col xs={{span: 4}} lg={{span: 4}}>
                <img src={offlineCities} alt='' style={{width: '.60rem'}} />
                <div style={{margin: '.10rem 0' }}><b>成都</b></div>
            </Col>
            <Col xs={{span: 4}} lg={{span: 4}}>
                <img src={offlineCities} alt='' style={{width: '.60rem'}} />
                <div style={{margin: '.10rem 0' }}><b>武汉</b></div>
            </Col>
            <Col xs={{span: 4}} lg={{span: 4}}>
                <img src={offlineCities} alt='' style={{width: '.60rem'}}/>
                <div style={{margin: '.10rem 0' }}><b>西安</b></div>
            </Col>
            <Col xs={{span: 4}} lg={{span: 4}}>
                <img src={offlineCities} alt='' style={{width: '.60rem'}} />
                <div style={{margin: '.10rem 0' }}><b>深圳</b></div>
            </Col>
          </Row>
        </Col>
        </div>
      </Row>
    </div>

  }

}

export default OfflineCities



